<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
       <table>
           <caption>
               <h1>学生信息管理系统</h1>
           </caption>
           <thead>
               <tr>
                   <th v-for='item in fields'>{{item}}</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for='(item,index) in students'>
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.sex}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.address}}</td>
                   <td>
                       <button @click='removeHandle(index)'>移除</button>
                   </td>
               </tr>
               <tr>
                   <td v-if='students.length' colspan="6" style="text-align: left;">总人数:{{total}} 男生:{{boy}} 女生:{{girl}}</td>
                   <td v-else colspan="6" style="text-align: center; color: #ccc;">学生信息表为空</td>
               </tr>
           </tbody>
       </table>
    </div>
    <script src= '../../js/vue.js'></script>
    <script src="main.js"></script>
</body>
</html>